<template>
  <div class="plugin-architecture-section">
    <h4>插件化架构 <el-icon><Management /></el-icon></h4>
    <p>
      我们的埋点脚本采用插件化架构设计，让您可以轻松扩展和定制跟踪功能，
      无需修改核心代码。这种低耦合、高内聚的设计提高了代码的可维护性和可扩展性。
    </p>

    <el-alert
      title="架构优势"
      description="插件化架构使埋点系统具有极高的扩展性和灵活性，您可以根据业务需求定制跟踪功能，而不需要修改核心代码。"
      type="info"
      :closable="false"
      show-icon
      style="margin-bottom: 20px"
    />

    <el-card title="1. 注册自定义插件" style="margin-bottom: 20px">
      <template #header>
        <div style="display: flex; justify-content: space-between; align-items: center">
          <span>1. 注册自定义插件</span>
          <el-button type="text" :icon="DocumentCopy" @click="copyCode(pluginExamples.registerPlugin)">
            复制代码
          </el-button>
        </div>
      </template>
      <p>
        通过<code>registerPlugin</code>方法，您可以创建自己的插件来扩展埋点功能。
        每个插件都可以访问核心配置和工具函数。
      </p>
      <pre class="code-block"><code>{{ pluginExamples.registerPlugin }}</code></pre>
    </el-card>

    <el-card title="2. 自定义事件跟踪插件" style="margin-bottom: 20px">
      <template #header>
        <div style="display: flex; justify-content: space-between; align-items: center">
          <span>2. 自定义事件跟踪插件</span>
          <el-button type="text" :icon="DocumentCopy" @click="copyCode(pluginExamples.customEventPlugin)">
            复制代码
          </el-button>
        </div>
      </template>
      <p>
        这个示例展示了如何创建一个滚动跟踪插件，监控用户的滚动行为并自动记录埋点数据。
      </p>
      <pre class="code-block"><code>{{ pluginExamples.customEventPlugin }}</code></pre>
    </el-card>

    <el-card title="3. 插件间通信">
      <template #header>
        <div style="display: flex; justify-content: space-between; align-items: center">
          <span>3. 插件间通信</span>
          <el-button type="text" :icon="DocumentCopy" @click="copyCode(pluginExamples.pluginCommunication)">
            复制代码
          </el-button>
        </div>
      </template>
      <p>
        插件之间可以通过事件总线模式进行通信，实现更复杂的功能协作。
        下面的示例展示了如何创建事件总线插件和一个依赖于它的用户活动监控插件。
      </p>
      <pre class="code-block"><code>{{ pluginExamples.pluginCommunication }}</code></pre>
      
      <el-divider />
      
      <el-alert
        title="设计模式"
        type="success"
        :closable="false"
        show-icon
      >
        <div>
          <p>插件架构采用了多种设计模式，确保系统的可扩展性和可维护性：</p>
          <ul>
            <li><strong>观察者模式：</strong>通过事件订阅和发布实现松耦合通信</li>
            <li><strong>依赖注入：</strong>核心功能和工具通过init方法注入插件</li>
            <li><strong>策略模式：</strong>不同插件可以提供相同接口的不同实现</li>
            <li><strong>外观模式：</strong>为复杂的埋点系统提供简单统一的API</li>
          </ul>
        </div>
      </el-alert>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { DocumentCopy, Management } from '@element-plus/icons-vue'

const pluginExamples = {
  registerPlugin: `// 注册自定义插件
if (window.DevOpsBITracker) {
  window.DevOpsBITracker.registerPlugin('myFeaturePlugin', {
    // 初始化方法，会在脚本初始化时调用
    init: function(core, utils) {
      console.log('插件初始化', core.config);
      
      // 可以访问核心配置和工具函数
      this.trackingId = core.trackingId;
      this.debug = core.debug;
      this.log = utils.log;
      
      // 设置自己的初始状态
      this.state = {
        enabled: true,
        counter: 0
      };
      
      this.log('我的插件已初始化');
    },
    
    // 自定义方法
    incrementCounter: function() {
      this.state.counter++;
      this.log('计数器增加: ' + this.state.counter);
      return this.state.counter;
    },
    
    // 页面卸载前处理
    handleBeforeUnload: function() {
      this.log('页面即将卸载，插件处理中...');
      // 执行清理操作
    }
  });
}`,

  customEventPlugin: `// 创建自定义事件跟踪插件
window.DevOpsBITracker.registerPlugin('scrollTracker', {
  init: function(core, utils) {
    this.core = core;
    this.utils = utils;
    this.lastScrollPosition = 0;
    this.scrollThreshold = 300; // 滚动超过300px触发一次
    
    // 添加滚动监听
    window.addEventListener('scroll', this.handleScroll.bind(this));
    utils.log('滚动跟踪插件已初始化');
  },
  
  handleScroll: function() {
    const currentPosition = window.scrollY;
    const scrollDiff = Math.abs(currentPosition - this.lastScrollPosition);
    
    // 超过阈值时触发事件
    if (scrollDiff >= this.scrollThreshold) {
      this.lastScrollPosition = currentPosition;
      
      // 计算页面滚动百分比
      const scrollPercent = Math.round(
        (currentPosition / (document.body.scrollHeight - window.innerHeight)) * 100
      );
      
      // 使用核心API记录事件
      if (window.DevOpsBITracker) {
        window.DevOpsBITracker.trackEvent(
          'user_behavior',
          'scroll',
          'page_scroll_depth',
          scrollPercent,
          {
            scrollPosition: currentPosition,
            scrollPercent: scrollPercent + '%',
            viewportHeight: window.innerHeight
          }
        );
      }
    }
  },
  
  // 清理函数
  destroy: function() {
    window.removeEventListener('scroll', this.handleScroll.bind(this));
    this.utils.log('滚动跟踪插件已销毁');
  }
});`,

  pluginCommunication: `// 插件之间通信示例
// 1. 创建事件总线插件
window.DevOpsBITracker.registerPlugin('eventBus', {
  init: function(core, utils) {
    this.events = {};
    utils.log('事件总线插件已初始化');
  },
  
  // 订阅事件
  on: function(eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(callback);
    return this;
  },
  
  // 触发事件
  emit: function(eventName, data) {
    const callbacks = this.events[eventName] || [];
    callbacks.forEach(callback => callback(data));
    return this;
  }
});

// 2. 创建依赖于事件总线的插件
window.DevOpsBITracker.registerPlugin('userActivityMonitor', {
  init: function(core, utils) {
    this.utils = utils;
    this.inactivityTimeout = 60000; // 1分钟无操作视为不活跃
    this.timer = null;
    this.isActive = true;
    
    // 获取事件总线插件
    this.eventBus = core.plugins.eventBus;
    
    // 重置计时器的函数
    this.resetTimer = this.resetTimer.bind(this);
    
    // 监听用户活动
    ['mousedown', 'keypress', 'scroll', 'touchstart'].forEach(event => {
      document.addEventListener(event, this.resetTimer);
    });
    
    // 初始化计时器
    this.resetTimer();
    utils.log('用户活动监控插件已初始化');
  },
  
  resetTimer: function() {
    // 如果用户之前不活跃，现在活跃了，触发状态变化
    if (!this.isActive) {
      this.isActive = true;
      this.eventBus.emit('user:active', { timestamp: new Date() });
    }
    
    clearTimeout(this.timer);
    this.timer = setTimeout(() => {
      this.isActive = false;
      this.eventBus.emit('user:inactive', { 
        timestamp: new Date(),
        inactiveFor: this.inactivityTimeout
      });
    }, this.inactivityTimeout);
  }
});`
}

const copyCode = (code: string) => {
  navigator.clipboard.writeText(code)
    .then(() => ElMessage.success('代码已复制到剪贴板'))
    .catch(() => ElMessage.error('复制失败'))
}
</script>

<style scoped lang="scss">
.plugin-architecture-section {
  h4 {
    margin-top: 0;
  }
  
  ul {
    padding-left: 20px;
    
    li {
      margin: 8px 0;
    }
  }
  
  code {
    background-color: #f5f5f5;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
  }
}

.code-block {
  background-color: #f5f5f5;
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  border: 1px solid #e0e0e0;
  margin-top: 12px;
  
  code {
    background: none;
    padding: 0;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
}
</style>
